<template>
  <div class="vanOverlay">
    <div v-show="showPic">
      <div class="dsImg">
        <span @click="clearTimer($store.state.timerId)"
              class="cancelAutoClose"
              v-if="$store.state.autoDsImgDisplay">
          {{ $store.state.autoCloseTimer }}s后关闭，点击取消
        </span>

        <van-icon name="close"
                  @click="closeImgDisplay()"
                  class="closeIcon" v-else>
        </van-icon>

        <img :src="imgUrl" alt="党史图片" @click="clearTimer($store.state.timerId)" />
        <van-icon class="arrowLeft" name="arrow-left" @click="subtractDate()"></van-icon>
        <van-icon class="arrowRight" name="arrow" @click="addDate()"></van-icon>
      </div>
      <div class="detailBtn">
        <button @click="showDsDetail()">查看详情</button>
      </div>
    </div>
    <div v-show="!showPic" style="height: 880px">
      <van-icon name="close"
                @click="closeContentDetail()"
                class="closeDetailIcon">
      </van-icon>
      <div class="detailDiv">
        <div class="contentDetail">
          <h2>【党史上的今天】{{ $store.state.chooseDate.format('MM月DD日') }}</h2>
          <div class="contentDetailDiv" v-html="contentDetail"></div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import dayjs from "dayjs";
import API from "@/api/api-chat-list";
import AesGcm from "@/utils/aesgcm";

const DAY_PATTERN = 'MM-DD';

export default {
  name: "DsOverlay",
  data() {
    return {
      imgUrl: null, // 党史图片路径
      showPic: true, // 是否展示图片
      contentDetail: null, // 党史详细信息
    }
  },
  created() {
    this.getImgUrl();
  },
  methods: {
    closeImgDisplay() {
      this.$store.state.imgDisplay = false;
      this.$store.state.chooseDate = dayjs();
      this.getImgUrl();
      this.clearTimer(this.$store.state.timerId);
    },
    getImgUrl() {
      // 党史图片路径
      const url = new URL(AesGcm.decrypt(process.env.VUE_APP_INTERFACE_URL) + '/partycalendartoday/showInfo');
      url.searchParams.append('monthDate', this.$store.state.chooseDate.format(DAY_PATTERN));
      this.imgUrl = url.toString();
    },
    subtractDate() {
      this.$store.state.chooseDate = this.$store.state.chooseDate.subtract(1, 'day');
      this.getImgUrl();

      this.clearTimer(this.$store.state.timerId);
    },
    addDate() {
      this.$store.state.chooseDate = this.$store.state.chooseDate.add(1, 'day');
      this.getImgUrl();

      this.clearTimer(this.$store.state.timerId);
    },
    async showDsDetail() {
      this.showPic = false;
      const param = {
        'monthDate': this.$store.state.chooseDate.format(DAY_PATTERN)
      }
      const content = await API.getPartyArticleContent(param);
      this.contentDetail = content?.data || null;

      this.clearTimer(this.$store.state.timerId);

      document.querySelector('.contentDetail').scrollTop = 0;
    },
    closeContentDetail() {
      this.showPic = true;
    },
    /**
     * 清除定时器
     * @param timerId
     */
    clearTimer(timerId) {
      if (timerId) {
        this.$store.state.autoDsImgDisplay = false;
        clearInterval(timerId);
        this.$store.state.timerId = null;
      }
    }
  }
}
</script>

<style scoped>

.vanOverlay {
  height: 100%;
}

.vanOverlay .dsImg {
  text-align: center;
  margin-top: 110px;
}

.vanOverlay .detailBtn {
  text-align: center;
  margin-top: 60px;
}

.vanOverlay .detailBtn button {
  padding: 8px 15px;
  border-radius: 20px;
  background-color: #b52726;
  color: white;
  border: none;
}

.vanOverlay img {
  width: 320px;
  height: 500px;
}

.vanOverlay .closeIcon {
  color: white;
  position: absolute;
  right: 20px;
  top: 60px;
  font-size: 25px;
  opacity: 0.7;
}
.vanOverlay .cancelAutoClose {
  color: white;
  position: absolute;
  right: 120px;
  top: 60px;
  opacity: 0.7;
  font-size: 13px;
  border: 2px solid white;
  border-radius: 12px;
  padding: 6px
}

.vanOverlay .closeDetailIcon {
  color: white;
  position: absolute;
  right: 20px;
  top: 60px;
  font-size: 25px;
}

.vanOverlay .arrowLeft, .vanOverlay .arrowRight {
  color: white;
  background-color: #737373;
  font-size: 20px;
  border-radius: 19px;
  padding: 9px;
  opacity: 0.5;
}

.vanOverlay .arrowLeft {
  position: absolute;
  top: 340px;
  left: 36px;
}

.vanOverlay .arrowRight {
  position: absolute;
  top: 340px;
  right: 38px;
}

.vanOverlay .detailDiv {
  margin: 110px 20px 80px 20px;
  padding-top: 30px;
  padding-bottom: 20px;
  height: 60%;
  background: url("../../assets/static/image/dz/ds_background.png") no-repeat;
  background-size: contain;
  border-radius: 4px;
  position: relative;
}

.vanOverlay .contentDetail {
  position: relative;
  height: 93%;
  overflow-y: auto;
  padding: 0 23px;
  line-height: 25px;
  color: white;
  -webkit-overflow-scrolling: touch;
}

.vanOverlay .contentDetail h2 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 10px;
}

.contentDetailDiv {
  margin-bottom: 140px;
}

.contentDetailDiv /deep/ p:first-of-type {
  text-indent: 0;
}

.contentDetailDiv /deep/ p {
  text-indent: 2em;
}


</style>
